import React from 'react'
import {
    Form,
    Button,
    message,
    Switch,
    Card,
    Icon,
    Input,
    Cascader,
    DatePicker,
    Select,
    InputNumber,
    Upload,
    Tooltip,
} from 'antd'
import moment from 'moment'
import residences from '../../common/chinaDivision'
import { observer, inject } from 'mobx-react'
import _ from 'lodash'
import util from '../../../common/util'

const FormItem = Form.Item
const { RangePicker } = DatePicker;
const Option = Select.Option;

function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
    if (!isJPG) {
        message.error('只能上传就jpg和npg文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 3;
    if (!isLt2M) {
        message.error('图片大小不可超过3MB!');
    }
    return isJPG && isLt2M;
}

@inject("store")
@observer
class BaseInfo extends React.Component {
    constructor() {
        super()
    }
    upLoadImg = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    }
    render() {
        let {store,form} = this.props
        let {exhibitionInfo,actions,_refreshFlag}=store
        const { getFieldDecorator } = this.props.form;
        const { TextArea } = Input;
        const formItemLayout = {
            labelCol: {
                sm: { span: 3 },
            },
            wrapperCol: {
                sm: { span: 14 },
            },
        };
        const selectBefore = (
            <Select defaultValue="http://" style={{ width: 90 }} onChange={actions.urlPreChange}>
                <Option value="http://">Http://</Option>
                <Option value="https://">Https://</Option>
            </Select>
        );
        const companyKinds=['互联网','人工智能','智能制造','云计算与大数据','科技','经济贸易','创新创业','医疗医学','能源化工','金融财经','农林牧渔',
            '教育培训','加工制造','地产建筑', '文化娱乐','运动健康','交通物流','服务行业','其它行业'];
        const kinds=[];
        companyKinds.map((kind,index)=>{
            kinds.push(<Option key={kind}>{kind}</Option>)
        })
        const uploadButton = (
            <div>
                <Icon type={store.imgLoading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div layout='horizontal' >
                <FormItem
                    {...formItemLayout}
                    label="展览名称"
                >
                    {getFieldDecorator('expoName', {
                        initialValue:exhibitionInfo.expoName,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, whitespace:true,message: '请输入展览名称!' },
                            {min:5,max:30,message:'展览名称在5到30个字之间'},
                            {pattern:`^[\u4E00-\u9FA5A-Za-z0-9_—+^%&',;=?$【】；’“》《。，？、·（）！]+$`,message:'展览名称只能由汉字、英文、数字和特殊符号组成'}],
                    })(
                        <Input placeholder="请输入展览名称"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览时间"
                >
                    {getFieldDecorator('time', {
                        initialValue:exhibitionInfo.startTime?[moment(exhibitionInfo.startTime,'YYYY-MM-DD HH:mm:ss'),moment(exhibitionInfo.endTime,'YYYY-MM-DD HH:mm:ss')]:[],
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, message: '请选择展会时间!' }],
                    })(
                        <RangePicker
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['开始时间', '结束时间']}
                            style={{width:"100%"}}
                        />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览领域"
                >
                    {getFieldDecorator('expoScope', {
                        initialValue:exhibitionInfo.expoScope,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, message: '请选择展览领域!' }],
                    })(
                        <Select placeholder="请选择展览领域">{kinds}</Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label={(
                        <span>
                            展位数&nbsp;
                            <Tooltip title="将生成与展位数相同的验证码，用于参展商登录展会唯一凭证，在已发布展览中下载">
                                <Icon type="question-circle-o" />
                             </Tooltip>
                        </span>
                    )}
                >
                    {getFieldDecorator('standTotal', {
                        initialValue:exhibitionInfo.standTotal,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, message: '请输入展位数!' }],
                    })(
                        <InputNumber min={1} max={9999}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览简介"
                >
                    {getFieldDecorator('expoResume', {
                        initialValue:exhibitionInfo.expoResume,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules: [{ required: true, whitespace:true,message: '请输入展览简介!' },
                            {max:500,message:'简介字数不得大于500字'}],
                    })(
                        <TextArea rows={6} placeholder="请输入展览简介"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览宣传图"
                >
                    {getFieldDecorator('expoImg', {
                        initialValue:exhibitionInfo.expoImg,
                        rules: [{ required: true,message:'请选择展览宣传图！' }],
                    },{
                        getValueFromEvent:this.upLoadImg,
                    })(
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="/api/common/upload"
                            beforeUpload={beforeUpload}
                            onChange={actions.handleImgChange}
                        >
                            {store.imageUrl ? <img src={store.imageUrl} alt="展览宣传图" /> : uploadButton}
                        </Upload>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览地点"
                >
                    {getFieldDecorator('place', {
                        initialValue:[exhibitionInfo.province,exhibitionInfo.city,exhibitionInfo.area],
                    })(
                        <Cascader options={residences} placeholder="请选择展览地点"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="详细地址"
                >
                    {getFieldDecorator('street', {
                        initialValue:exhibitionInfo.street,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules:[{max:150,message:'详细地址不得多于150字'}],
                    })(
                        <Input placeholder="如：江东中路300号"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展馆地址"
                >
                    {getFieldDecorator('location', {
                        initialValue:exhibitionInfo.location,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules:[{max:150,message:'详细地址不得多于150字'}],
                    })(
                        <Input placeholder="如：南京国际博览会议中心"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览官网"
                >
                    {getFieldDecorator('officialUrl', {
                        initialValue:exhibitionInfo.officialUrl,
                        validateTrigger: ['onChange', 'onBlur'],
                        rules:[{max:40,message:'展览官网长度不得大于40位'}],
                    })(
                        <Input addonBefore={selectBefore} placeholder="如：chinaexpo365.com"/>
                    )}
                </FormItem>
            </div>
        )
    }
}

export default BaseInfo

